<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理员列表</title>
    <script src="/js/global.js"></script>
    <link rel="stylesheet" href="/css/font.css" type="text/css"/>
    <link rel="stylesheet" href="/css/layui.css" type="text/css"/>
    <link rel="stylesheet" href="/css/xadmin.css" type="text/css"/>
    <script type="text/javascript" src="/js/layui.js" ></script>
    <script type="text/javascript" src="/js/xadmin.js" ></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js" ></script>
</head>
<body>
<!-- 条件查询 -->
<div class="layui-form-item" style="margin-top: 20px;" onsubmit="false">
    <div class="layui-form-item">

        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="username" id="username" placeholder="用户名" class="layui-input">
        </div>

        <button class="layui-btn" id="search" data-type="reload">查询</button>

    </div>
</div>

<!-- 表格 -->
<table id="test" class="layui-hide" lay-filter="test"></table>

<!-- 表头 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe624;</i>添加</button>
    </div>
</script>


<!-- 行内 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-icon  layui-btn-normal" lay-event="update"><i class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-xs layui-icon  layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script>
    layui.use(['layer', 'table', 'form', 'transfer', 'util', 'laydate'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var transfer = layui.transfer;
        var util = layui.util;
        var laydate = layui.laydate;

        //初始化表格数据
        table.render({
            elem: '#test',
            url: '../admininfo/selectAll',
            toolbar: '#toolbarDemo',
            method: "get",
            defaultToolbar: ['filter', 'print', 'exports'],
            title: '管理员列表',
            page : true,
            id: 'testReload',
            //修改响应数据
            parseData: function(res) {
                return {
                    "code": 0, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [
                [{
                    field: 'id',
                    title: 'ID',
                    align: 'center'
                },
                    {
                        field: 'account',
                        title: '账号',
                        align: 'center'
                    },     {
                        field: 'username',
                        title: '用户名',
                        align: 'center'
                    },
                    {
                        fixed: 'right',
                        title: '操作',
                        toolbar: '#barDemo',
                        width: 180,
                        align: 'center'
                    }
                ]
            ]
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '添加用户',
                        type: 2,
                        skin: 'layui-layer-molv',
                        shade: 0.3,
                        shadeClose: true,
                        anim: 5,
                        btnAlign: 'c',
                        closeBtn: 1,
                        area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                        content: 'admin-add.html',
                        end: function() {
                            back();
                        }
                    });
                    break;
            };
        });

        //模糊查询
        $('#search').on('click', function() {
            table.reload('testReload', {
                where: {
                    'username': $("#username").val(),
                }
            });
        });

        //重新加载
        function back() {
            table.reload('testReload', {
                page: {
                    curr: $(".layui-laypage-em").next().html()
                }
            });
        }

        //监听行工具事件
        table.on('tool(test)', function(obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('真的删除吗', function(index) {
                    $.post('../admininfo/delete', {
                        "id": data.id
                    }, function(res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 2000
                            }, function() {
                                back();
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000
                            }, function () {
                                back();
                            });
                        }
                    })
                });
            } else if (obj.event === 'update') {
                layer.open({
                    title: '您正在修改用户名为：' + obj.data.username + '信息',
                    type: 2,
                    shade: 0.3,
                    shadeClose: true,
                    skin: 'layui-layer-molv',
                    anim: 5,
                    btnAlign: 'c',
                    closeBtn: 1,
                    area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                    content: 'admin-update.html',
                    success: function(layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("#id").val(obj.data.id);
                        body.find("#account").val(obj.data.account);
                        body.find("#password").val(obj.data.password);
                        body.find("#username").val(obj.data.username);
                    },
                    end: function() {
                        back();
                    }
                });
            }
        });

    });
</script>
</body>
</html>
